<template>
  <div>
    <!-- row-key: 每条数据唯一的标识 -->
    <el-table style="width: 100%;margin-bottom: 20px;" row-key="id" border :data="permisstionList">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="createTime"></el-table-column>
      <el-table-column label="操作">
        <template #="{ row }">
          <!-- row: 已有的菜单对象或者按钮对象的数据 -->
          <el-button type="primary" size="small" @click="addPermisstion(row)" :disabled="row.level == 4 ? true : false">
            {{ row.level == 3 ? "添加功能" : "添加菜单" }}
          </el-button>
          <el-button type="primary" size="small" @click="updatePermission(row)"
            :disabled="row.level == 1 ? true : false">编辑</el-button>
          <!-- 气泡确认框删除 -->
          <el-popconfirm :title="`你确定要删除菜单${row.name}吗?`" @confirm="deleteMenu(row.id)" width="250px">
            <template #reference>
              <el-button type="primary" size="small" :disabled="row.level == 1 ? true : false">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框：添加或者更新菜单的数据 -->
    <el-dialog v-model="dialogFormVisible" :title="menuData.id ? '修改菜单' : '添加菜单'">
      <!-- 表单组件：收集新增或已有的菜单的数据 -->
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input placeholder="请您输入菜单名称" v-model="menuData.name" />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input placeholder="请您输入权限值" v-model="menuData.code" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveMenu">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { reqAllPermission, AddOrUpdatePermission, reqDeleteMenu } from '@/api/acl/menu'
// 引入类型
import type { PermissionResponseData, PermissionList, Permission } from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus/lib/components/index.js'

// 存储菜单的数据
let permisstionList = ref<PermissionList>([])
// 控制对话框的显示与隐藏
let dialogFormVisible = ref<boolean>(false)

// 存储修改或者新增菜单的数据
let menuData = reactive({
  id: 0,
  code: '',  // 权限数值
  level: 0, // 几级菜单
  name: '',  // 菜单的名称
  pid: 0,   // 菜单的ID
})

// 组件加载完渲染table
onMounted(() => {
  getPermission()
})


// 获取所有的菜单
const getPermission = async () => {
  let result: PermissionResponseData = await reqAllPermission()
  if (result.code == 200) {
    permisstionList.value = result.data
  }
}

// 新增菜单|功能
const addPermisstion = (row: Permission) => {
  // 显示对话框
  dialogFormVisible.value = true
  // 清空之前的数据
  Object.assign(menuData, {
    id: 0,
    code: '',  // 权限数值
    level: 0, // 几级菜单
    name: '',  // 菜单的名称
    pid: 0,   // 菜单的ID
  })
  // 收集新增的菜单的level数值
  menuData.level = row.level + 1
  // 给谁新增子菜单
  menuData.pid = (row.id as number)
}

// 编辑菜单|功能
const updatePermission = (row: Permission) => {
  // 显示对话框
  dialogFormVisible.value = true
  // 点击修改按钮：手机已有的菜单的数据进行更新
  Object.assign(menuData, row)
}

// 保存新增子菜单|更新已有菜单的数据
const saveMenu = async () => {
  let result = await AddOrUpdatePermission(menuData)
  if (result.code == 200) {
    ElMessage({ type: 'success', message: menuData.id ? '修改菜单成功' : '添加菜单成功' })
    // 关闭对话框
    dialogFormVisible.value = false
    // 重新获取菜单数据
    getPermission()
  } else {
    ElMessage({ type: 'error', message: menuData.id ? '修改菜单失败' : '添加菜单失败' })
    // 关闭对话框
    dialogFormVisible.value = false
  }
}

// 删除按钮回调
const deleteMenu = async (id: number) => {
  let result = await reqDeleteMenu(id)
  if (result.code == 200) {
    ElMessage({ type: 'success', message: '删除菜单成功' })
    // 重新获取菜单数据
    getPermission()
  } else { ElMessage({ type: 'error', message: '删除菜单失败' }) }
}
</script>

<script lang="ts">
export default {
  name: 'AclPermisstion'
}
</script>
<style scoped></style>